<template>
  <!-- <HomeView/> -->
    <smartAI/>
    
    <n-config-provider
    :theme="theme"
    
  >
  <n-message-provider>
    <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"  v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <component :is="Component"  v-if="!$route.meta.keepAlive"/>
      </router-view> 
</n-message-provider>
      
  </n-config-provider>  
</template>



<script lang="ts" setup>
import { useDark } from "@vueuse/core";
import mitt from '@/util/emit';
import smartAI from "./views/SmartAI.vue";
import { ref, onMounted} from 'vue';
import { darkTheme } from 'naive-ui'
import type { GlobalTheme } from 'naive-ui'
const theme =ref<GlobalTheme | null>(null)



/**
 * @type import('naive-ui').GlobalThemeOverrides
 */
const lightThemeOverrides = {
  common: {
    primaryColor: '#000000'
  }
  // ...
}

const darkThemeOverrides = {
  common: {
    primaryColor: '#FFFFFF'
  }
  // ...
}

onMounted(()=>{
      mitt.on('IsDark',(e)=>{
          if(e){
            theme.value=darkTheme;
          }else{
            theme.value=null;
          }
          
        })
      })

      const debounce = (callback: (...args: any[]) => void, delay: number) => {
      let tid: any;
      return function (...args: any[]) {
        const ctx = self;
        tid && clearTimeout(tid);
        tid = setTimeout(() => {
          callback.apply(ctx, args);
        }, delay);
      };
    };

    const _ = (window as any).ResizeObserver;
    (window as any).ResizeObserver = class ResizeObserver extends _ {
      constructor(callback: (...args: any[]) => void) {
        callback = debounce(callback, 20);
        super(callback);
      }
    };
  



</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

 
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
